<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span>消息中心</span>
            <span></span>
        </div>
        <div class="choose-type">
            <span @click="chooseType = 1,pageNum=1" :class="[chooseType == 1?'chooseNow':'']">官方公告</span>
            <span @click="chooseType = 2,pageNum=1" :class="[chooseType == 2?'chooseNow':'']">客服</span>
        </div>
        <!-- 官方公告 -->
        <div class="scroll-range" style="height: 80vh;" v-if="chooseType == 1?true:false">
            <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                :autoFill="false"
                ref="loadmore"
            >
                <div class="official-list">
                    <div class="official-list-detail" @click="$router.push({name:'messageDetail'})">
                        <p class="singleSee">消息</p>
                        <div>
                            <span class="singleSee">尊敬的即刻用户：为了</span>
                            <span>06-25 11:44</span>
                        </div>
                    </div>
                </div>
            </mt-loadmore>
            <bgStatus v-show="false" :bgImg = bgImg :bgWord = bgWord></bgStatus>
        </div>
        <!-- 客服 -->
        <div class="scroll-range" v-if="chooseType == 2?true:false">
            <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                :autoFill="false"
                ref="loadmore"
            >
                <div class="official-list">
                    <div class="official-list-detail">
                        <p class="singleSee">消息</p>
                        <div>
                            <span class="singleSee">尊敬的即刻用户：为了</span>
                            <span>06-25 11:44</span>
                        </div>
                    </div>
                </div>
            </mt-loadmore>
            <bgStatus v-show="false" :bgImg = bgImg :bgWord = bgWord></bgStatus>
        </div>
    </div>
</template>
<script>
import bgStatus from '../../components/bgStatus'
export default {
    data() {
        return {
            chooseType: "1",
            //加载
            allLoaded: false, //数据是否加载完毕
            pageNum: 1,
            //暂无信息
            bgImg:require('../../assets/img/gonggao.png'),
            bgWord:"暂时没有公告哦",          
        };
    },
    components:{
        bgStatus
    },
    created(){
        console.log(this.aaaa)
    },
    methods: {
        //下拉刷新
        loadTop() {
            setTimeout(res => {
                this.$refs.loadmore.onTopLoaded();
            }, 1500);
        },
        //上拉加载
        loadBottom() {
            this.pageNum++;
            setTimeout(res => {
                this.$refs.loadmore.onBottomLoaded();
            }, 1500);
        }
    }
};
</script>
<style lang="less" scoped>
.chooseNow {
    color: @blueColor5;
    border-bottom: 2px solid @blueColor10 !important;
}
.header-title {
    border-bottom: 1px solid @blackColor3;
}
.choose-type {
    .flexStartCenter();
    font-size: 14px;
    font-weight: bold;
    color: @blackColor8;
    padding: 0 15px;
    span {
        display: inline-block;
        width: 50%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 2px solid @blackColor3;
    }
}
// 房源 //地区
.scroll-range {
    .official-list {
        width: 90%;
        margin: 0 auto;
        padding: 0 0 15px;
        .official-list-detail {
            color: @blackColor5;
            font-size: 11px;
            border-bottom: 1px solid @blackColor3;
            padding: 15px 0;
            p {
                width: 80%;
                color: @blackColor8;
                font-size: 13px;
                font-weight: bold;
                margin-bottom: 4px;
            }
            div {
                .flexBetweenCenter();
                span:first-child{
                    width: 70%;
                }
            }
        }
    }
}

</style>
